// Mixin: border
.border-top (@left: 0, @right:0, @bg: #dedede) {
    position: relative;
    &:before {
        content: " ";
        display: block;
        position: absolute;
        left: @left;
        right: @right;
        top: 0;
        height: 1px;
        background-color: @bg;
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
        z-index: 15;
    }
}

.border-left (@top: 0, @bottom:0, @bg: #dedede) {
    position: relative;
    &:before {
        content: " ";
        display: block;
        position: absolute;
        top: @top;
        bottom: @bottom;
        left: 0;
        width: 1px;
        background-color: @bg;
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        transform: scaleX(0.5);
        -webkit-transform: scaleX(0.5);
        z-index: 15;
    }
}

.border-right (@top: 0, @bottom:0, @bg: #dedede) {
    position: relative;
    &:after {
        content: " ";
        display: block;
        position: absolute;
        top: @top;
        bottom: @bottom;
        right: 0;
        width: 1px;
        background-color: @bg;
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        transform: scaleX(0.5);
        -webkit-transform: scaleX(0.5);
        z-index: 15;
    }
}

.border-bottom (@left: 0, @right:0, @bg: #dedede) {
    position: relative;
    &:after {
        content: " ";
        display: block;
        position: absolute;
        left: @left;
        right: @right;
        bottom: 0;
        height: 1px;
        background-color: @bg;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
        z-index: 15;
    }
}